import React from 'react';
import { Link } from 'react-router-dom';
import ReactJson from 'react-json-view'
import { inject, observer } from "mobx-react";
import BN from 'bignumber.js'
import swal from 'sweetalert';
import Select from 'react-select';

@inject("UiStore")
@observer
export class ThirdStep extends React.Component {
  constructor(props){
    super(props);
    this.tokenStore = props.UiStore.tokenStore;
    this.gasPriceStore = props.UiStore.gasPriceStore;
    console.log(this.gasPriceStore.gasPricesArray)
    this.onNext = this.onNext.bind(this)
    this.state = {
      gasPrice: ''
    }
  }
  componentDidMount() {
    if(this.tokenStore.dublicates.length > 0){

      swal({
        title: `您的列表中有重复的eth地址.`,
        text: `${JSON.stringify(this.tokenStore.dublicates.slice(), null, '\n')}.\n本已经将它们自动合并在一起。 请确保列表数据正确.`,
        icon: "warning",
      })
    }
  }
  onNext(e) {
    e.preventDefault();
    if (new BN(this.tokenStore.totalBalance).gt(new BN(this.tokenStore.defAccTokenBalance))){
      console.error('Your balance is more than total to send')
      swal({
        title: "Token 余额不足",
        text: `Token 发送总数超过了账户余额.\n本次转账所需: ${this.tokenStore.totalBalance} ${this.tokenStore.tokenSymbol}`,
        icon: "error",
      })
      return
    }
    if( new BN(this.tokenStore.totalCostInEth).gt(new BN(this.tokenStore.ethBalance))){
      console.error('please fund you account in ')
      swal({
        title: "ETH 余额不足",
        text: `您的ETH余额不足以支付本次转账矿工费，请转账后重试。\n本次转账所需: ${this.tokenStore.totalCostInEth} ETH`,
        icon: "error",
      })
      return
    }
    this.props.history.push('/4')
  }

  onGasPriceChange = (selected) => {
    if(selected){
      this.gasPriceStore.setSelectedGasPrice(selected.value)
    }
  }
  render() {
    return (
      <div className="container container_bg">
        <div className="content">
        <h1 className="title"><strong>欢迎使用</strong>ETH/Token<strong>批量转账</strong></h1>
          <p className="description">
          本次批量转账的账务测算 <br />
          本程序会自动合并同一地址的发送数量，请依此核对。
          </p>
          <form className="form">
            <ReactJson displayDataTypes={false}
              style={{backgroundColor: 'none'}}
              indentWidth="2"
              iconStyle="square"
              name={false}
              theme="solarized"
              src={this.tokenStore.jsonAddresses.slice()} />
              <div style={{padding: "25px 0px"}}>
                <p>请选择适合的矿工费 (Gas)，低价格转账速度会更慢，建议值：standard </p>
                <Select.Creatable
                  isLoading={this.gasPriceStore.loading}
                  value={this.gasPriceStore.selectedGasPrice}
                  onChange={this.onGasPriceChange}
                  loadingPlaceholder="获取当前Gas价格中 ..."
                  placeholder="请选择适合的转账速度"
                  options={this.gasPriceStore.gasPricesArray.slice()}
                />
              </div>
            <div className="send-info">
              <div className="send-info-side">
                <div className="send-info-i">
                  <p>您的ETH余额</p>
                  <p className="send-info-amount">{this.tokenStore.ethBalance}</p>
                </div>
                <div className="send-info-i">
                  <p>您的Token余额</p>
                  <p className="send-info-amount">{this.tokenStore.defAccTokenBalance} {this.tokenStore.tokenSymbol}</p>
                </div>
                <div className="send-info-i">
                  <p>本次转出Token合计数额</p>
                  <p className="send-info-amount">{this.tokenStore.totalBalance} {this.tokenStore.tokenSymbol}</p>
                </div>
                <div className="send-info-i">
                  <p>已获取授权数额</p>
                  <p className="send-info-amount">{this.tokenStore.allowance} {this.tokenStore.tokenSymbol}</p>
                </div>
              </div>
              <div className="send-info-side">
                <div className="send-info-i">
                  <p>批量发送地址总数</p>
                  <p className="send-info-amount">{this.tokenStore.jsonAddresses.length}</p>
                </div>
                <div className="send-info-i">
                  <p>发送次数</p>
                  <p className="send-info-amount">{this.tokenStore.totalNumberTx}</p>
                </div>
                <div className="send-info-i">
                  <p>当前选择的矿工费 (Gas Price)</p>
                  <p className="send-info-amount">
                  {this.gasPriceStore.selectedGasPrice} gwei
                  </p>
                </div>
                <div className="send-info-i">
                  <p>预估本次发送成本</p>
                  <p className="send-info-amount">
                  {this.tokenStore.totalCostInEth} ETH        
                  </p>
                </div>
              </div>
            </div>
            <Link onClick={this.onNext} className="button button_next" to='/4'>最后一步</Link>
          </form>
        </div>
      </div>
    );
  }
}